<template>
    <div class="title" style="position: relative">
        <template v-if="floors.layout == 'simple'">
            <div
                class="floor-tit clearfix"
                :class="{
                    style1: floors.style == 'style1',
                    style2: floors.style == 'style2',
                    style3: floors.style == 'style3'
                }"
            >
                <div
                    class="tit-div"
                    :style="{ color: floors.titleColor }"
                    :class="{
                        display: floors.photoStyle == 'display',
                        none: floors.photoStyle == 'hide',
                        lump: floors.photoStyle == 'lump'
                    }"
                >
                    <img
                        :src="floors.photo ? $imgUrlHead + floors.photo + '?x-oss-process=image/resize,w_40,h_40,limit_0,m_fixed' : require('../../assets/images/login-logo.png')"
                        alt=""
                        class="title-img"
                        v-if="floors.photoStyle == 'display'"
                    />
                    <span class="tit-span">{{ floors.title }}</span>
                </div>
            </div>
        </template>

        <template v-if="floors.layout == 'plentiful'">
            <div class="floor-tit clearfix left" :class="{ style1: floors.style == 'style1' }">
                <div
                    class="tit-div"
                    :style="{ color: floors.titleColor }"
                    :class="{
                        display: floors.photoStyle == 'display',
                        none: floors.photoStyle == 'hide',
                        lump: floors.photoStyle == 'lump'
                    }"
                >
                    <img
                        :src="floors.photo ? $imgUrlHead + floors.photo : require('../../assets/images/login-logo.png')"
                        alt=""
                        class="title-img"
                        v-if="floors.photoStyle == 'display'"
                    />
                    <span class="tit-span">{{ floors.title }}</span>
                </div>
                <div class="subTitle clearfix">
                    <span class="title" :style="{ color: floors.subheadColor }">{{ floors.subhead }}</span>
                </div>
                <p class="textLink" :style="{ color: floors.subheadColor }" :class="{ on: floors.moreTitle }" @click="jumpPage(floors)">
                    <span style="font-size: 13px">{{ floors.moreTitle }}</span>
                </p>
            </div>
        </template>
    </div>
</template>

<script>
import jumpMixin from 'mixin/jumpMixin.js'
export default {
    props: {
        floors: Object
    },
    mixins: [jumpMixin]
}
</script>
<style scoped>
/* 标题 */
.floor-tit {
    padding: 10px;
    text-align: center;
    position: relative;
    background: #fff;
}

.floor-tit.style1 {
    padding: 12px 0;
}

.floor-tit .tit-div {
    display: inline-block;
    font-size: 16px;
    height: 20px;
    line-height: 20px;
    margin-top: 2px;
    position: relative;
    background: #fff;
    padding: 0 15px;
    letter-spacing: 3px;
}

.floor-tit.style1 .tit-div,
.floor-tit.left .tit-div {
    float: left;
}

.floor-tit.style3 .tit-div::before {
    left: -70px;
}

.floor-tit.style3 .tit-div::after {
    right: -70px;
}

.floor-tit .tit-div .title-img {
    font-size: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: bottom;
}

.floor-tit.style1 .tit-div.display {
    padding: 0 5px 0 8px;
}

.floor-tit.style1 .tit-div.none {
    padding: 0 5px 0 3px;
}

.floor-tit.style1 .tit-div.lump {
    padding: 0;
}

.floor-tit .subTitle {
    float: left;
    margin-top: 7px;
    font-size: 10px;
}

.floor-tit .textLink {
    float: right;
    margin-right: 20px;
}

.floor-tit .textLink.on::before,
.floor-tit .textLink::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    border: 5px solid transparent;
    right: 4px;
    top: 19.1px;
}

.floor-tit .textLink.on::before {
    border-left: 5px solid #333;
}

.floor-tit .textLink.on::after {
    border-left: 5px solid #fff;
    right: 5px;
}

/* .floor-tit .textLink span::after {
    content: '';            
    display: inline-block;            
    width: 8px;            
    height: 8px;            
    border-right: 1px solid #888;            
    border-top: 1px solid #888;            
    -webkit-transform: rotate(45deg);     
    transform: rotate(45deg);
} */
.floor-tit.style3 .tit-div::after,
.floor-tit.style3 .tit-div::before {
    position: absolute;
    display: block;
    content: ' ';
    background: #f1f1f1;
    font-size: 0;
    height: 1px;
    width: 70px;
    bottom: 8px;
}

.floor-tit .block {
    display: inline-block;
    content: ' ';
    width: 4px;
    height: 20px;
    margin-right: 5px;
    background: red;
}

.floor-tit .tit-span {
    display: inline-block;
    font-size: 16px;
    height: 16px;
    line-height: 16px;
    margin-top: 2px;
    position: relative;
    background: #fff;
    padding: 0 5px;
    letter-spacing: 3px;
}

.floor-tit.style1 .tit-div.lump .tit-span,
.floor-tit.style2 .tit-div.lump .tit-span,
.floor-tit.style3 .tit-div.lump .tit-span {
    border-left: 4px solid currentColor;
}

/* 标题 */
</style>
